<template>
  <div class="fromEdit" v-if="!outParamsBindFlag">
    <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="流程参数" name="1">
        <div class="centerContent" v-if="options.length != 0 && sourceBlag">
          <div class="cenOne">
            <p v-for="(item, index) in options" :key="index">
              <label>{{ item.external_parameter_title }}：</label>
              <el-input
                style="width: 70%"
                v-model="item.external_parameter_value"
                placeholder="请输入内容"
              ></el-input>
            </p>
          </div>
          <div class="cenOne">
            <div v-for="(item, index) in apiOptions" :key="index">
              <label>{{ item.external_parameter_title }}：</label>
              <el-input
                style="width: 52%"
                v-model="item.external_parameter_value"
                placeholder=""
                disabled
              ></el-input>
              <el-button
                style="width: 18%"
                size="mini"
                @click="queryItem(item, index)"
                >查询</el-button
              >
            </div>
          </div>
        </div>
      </el-tab-pane>
      <el-tab-pane :label="keys" v-for="(keys,index) in listKey" :key="index" :name="index+2">
        <div v-if="sourceBlag">
          <el-button
            @click="insertData"
            size="mini"
            type="primary"
            style="margin-bottom: 10px"
            > <i class="el-icon-circle-plus-outline"></i> 插入数据</el-button
          >
        </div>
        <el-table
          v-if="sourceBlag"
          :data="lcListOptions"
          border
          class="tableAutoBtn"
          max-height="550"
          :header-cell-style="{ background: '#f2f5f8' }"
        >
          <qttable
            v-for="(item, index) in tabUserList2[keys]"
            :key="index"
            :header="item"
          ></qttable>
          <el-table-column width="80" prop="" label="操作" v-if="sourceBlag">
            <template slot-scope="scope">
              <el-popconfirm
                title="确定删除吗？"
                icon-color="#f00"
                @confirm="deleteRow(scope.row)"
              >
                <el-button slot="reference" size="mini" type="danger"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
        <el-table
          v-else
          :data="lcListOptions"
          border
          class="tableAutoBtn"
          max-height="550"
          :header-cell-style="{ background: '#f2f5f8' }"
        >
          <el-table-column type="index" align="center" label="序号" width="50">
          </el-table-column>
          <qttableno
            v-for="(item, index) in tabUserList2"
            :key="index"
            :header="item"
          ></qttableno>
        </el-table>
      </el-tab-pane>
    </el-tabs>
    <div style="text-align: center;">
        <el-button
            size="mini"
            type="primary"
            v-if="sourceBlag"
            @click="submitForm('ruleForm')"
            >创建任务</el-button
          >
        <el-button size="mini" v-if="sourceBlag" @click="resetForm('return')"
            >返回</el-button
          >
    </div>
    <slot v-if="!sourceBlag"></slot>

    <el-dialog
      :title="dialogTitle"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="100px"
      >
        <el-form-item
          :label="item.label"
          :prop="item.prop"
          v-for="(item, index) in itemList"
          :key="index"
          :rules="item.rules"
        >
          <el-input
            style="width: 90%"
            v-model="ruleForm[item.prop]"
            placeholder="请输入内容"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitFormQuery('ruleForm')">查 询</el-button>
          <el-button @click="clena('ruleForm')">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>


    <el-dialog
        title="任务名称"
        :visible.sync="rwName"
        width="30%"
        >
        <el-input v-model="inputName" placeholder="请输入任务名称"></el-input>
        <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="commitUserData">确 定</el-button>
        </span>
        </el-dialog>
  </div>
  <div class="fromEdit" v-else>
    <div>
      <el-button
        @click="insertData"
        size="mini"
        type="primary"
        style="margin-bottom: 10px"
        > <i class="el-icon-circle-plus-outline"></i> 插入数据</el-button
      >
    </div>
    <el-table
        :data="lcListOptions"
        border
        class="tableAutoBtn"
        max-height="550"
        :header-cell-style="{ background: '#f2f5f8' }"
        >
          <qttable
            v-for="(item, index) in tabHeadList"
            :key="index"
            :header="item"
          ></qttable>
          <el-table-column width="80" prop="" label="操作">
            <template slot-scope="scope">
              <el-popconfirm
                title="确定删除吗？"
                icon-color="#f00"
                @confirm="deleteRow(scope.row)"
              >
                <el-button slot="reference" size="mini" type="danger"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
    </el-table>
    <div style="margin-top: 10px;">
      <el-button
          size="mini"
          type="primary"
          @click="bindFun('ruleForm')">外部参数绑 定</el-button>
    <el-button size="mini" @click="resetForm('return')">返回</el-button>
</div>
  </div>
</template>

<script>
import {
  selectExternalParameter,
  requestgetResByUrl
} from '@/api/home_/adminCenter';
import request from '@/utils/request'
import qttable from '../components/qt_header_table';
import qttableno from '../components/qt_header_table_noedit';
import nativeRequest from '@/mixins/nativeRequest';
export default {
  props: {
    outParamsBindFlag: {
      type: Boolean,
      default:false,
      require: false
    },
    lcListOptions: {
      type: Array,
      default: [],
      require: true
    },
    sourceBlag: {
      type: Boolean,
      default: true,
      require: true
    },
    place: {
      type: String,
      default: '',
      require: true
    },
    deployId: {
      type: String,
      default: '',
      require: false
    },
  },
  mixins: [nativeRequest],
  components: { qttable, qttableno },
  data() {
    return {
        tabHeadList:[],
        rwName:false,
        tabUserList2:[],
        listKey:[],
        activeName: '1',
        ruleForm: {},
        dialogTitle: '',
        itemList: [],
        dialogVisible: false,
        inputName: '',
        selectItemOptions: [],
        apiOptions: [],
        options: [],
        rules: {}
    };
  },
  created() {
    if(this.outParamsBindFlag){
      request({
          url: '/ht-bpmn/basic/getExternalParameterColum',
          method: 'get'
        }).then(res => {
          if (res.code == 200) {
              this.tabHeadList = res.data
          } else {}
        })
    }
    selectExternalParameter(this.place,this.deployId).then((res) => {
      this.options = [];
      this.apiOptions = [];
      let arrLabel = res.data ? res.data.param : [];
      this.tabUserList2 = res.data.column
      this.listKey = []
      this.listKey = Object.keys(res.data.column)
      if (arrLabel && arrLabel.length > 0) {
        arrLabel.forEach((item, index) => {
          if (item.external_parameter_type == 'api') {
            item.external_parameter_value = ''
            this.apiOptions.push(item);
          } else {
            this.options.push(item);
          }
        });
      }
    });
  },
  methods: {
    bindFun(){
      request({
          url: '/ht-bpmn/basicData/addList',
          method: 'post',
          data:this.lcListOptions
        }).then(res => {
          if (res.code == 200) {
            this.resetForm()
            this.$message.success(res.msg)
          } else {
            this.$message.error(res.msg)
          }
        })
    },
    handleClick() {},
    submitFormQuery(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          requestgetResByUrl({
            requestBody: this.ruleForm,
            resultPath: this.selectItemOptions.external_parameter_data,
            requestMethod:this.selectItemOptions.external_parameter_requestMethod,
            defaultValue: this.selectItemOptions.external_parameter_value,
            url: this.selectItemOptions.external_parameter_url
          }).then((res) => {
            if (res.code == 200) {
              this.dialogVisible = false;
              this.apiOptions[this.itemIndex].external_parameter_value = res.data?res.data.data:""
            }
          });
        } else {
          return false;
        }
      });
    },
    clena(formName) {
      this.itemList = [];
      this.ruleForm = {};
      this.dialogVisible = false;
    },
    queryItem(v, i) {
      this.itemIndex = i;
      this.selectItemOptions = JSON.parse(JSON.stringify(v));
      this.rules = {};
      this.dialogTitle = '查询';
      this.itemList = [];
      let vexternal_parameter_requestBody = JSON.parse(v.external_parameter_requestBody)
      vexternal_parameter_requestBody.forEach((item, index) => {
        this.$set(this.ruleForm, item.filedName, '');
        this.itemList.push({
          label: item.filedCnName,
          prop: item.filedName,
          rules: [
            {
              required: item.required,
              message: '请输入' + item.filedCnName,
              trigger: 'change'
            }
          ]
        });
      });
      this.dialogVisible = true;
    },
    insertData() {
      this.$parent.insertData();
    },
    deleteRow(v) {
      this.$parent.deleteRow(v);
    },
    commitUserData(){
        this.$parent.submitForm(this.divForm, this.inputName);
    },
    submitForm() {
        this.rwName = true
    },
    resetForm() {
      this.$parent.resetForm();
    }
  }
};
</script>

<style lang="scss" scoped>
.cenOne {
    width:100%;
    display: flex;
    flex-direction: row;
  > p,
  > div {
    width: 50%;
    display: flex;
    flex-direction: row;
    margin-bottom: 10px;
    label {
      display: inline-block;
      width: 18%;
      text-align: right;
      font-weight: normal;
      line-height: 33px;
    }
  }
}
.centerContent {
  min-height: 20px;
  margin: 10px 0;

  .cenTwo {
    margin-bottom: 10px;
    > div {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      margin-bottom: 10px;
      margin-top: 10px;
      .el-input {
        width: 10%;
      }
      > p {
        margin-bottom: 10px;
        margin-top: 10px;
      }
      label {
        display: inline-block;
        width: 120px;
        text-align: right;
        line-height: 33px;
      }
    }
  }
}
</style>